<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="css/index-a258220039.min.css" media="screen" charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css"/>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
    <style type="text/css">
        .hide {
            display: none;
        }

        .follow-code-top {
            position: relative;
            width: 100%;
            background: #303133;
            padding: 0.8rem 2rem;
            z-index: 100;
            overflow: hidden;
            display: none;
        }

        .follow-code-logo {
            float: left;
            width: 4rem;
            z-index: 1000;
        }

        .follow-code-btn, .open-code-btn {
            position: absolute;
            line-height: 3.5rem;
            padding: 0 1rem;
            height: 3.5rem;
            top: 1.2rem;
            right: 2rem;
            text-align: center;
            color: #333333;
            background: #fbd454;
            border-radius: 2px;
        }

        .follow-code-container .follow-mask {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, .3);
            z-index: 100;
        }

        .follow-code-container .follow-dialog {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -125px;
            margin-top: -105px;
            width: 250px;
            height: 210px;
            border-radius: 6px;
            background: #FFf;
            z-index: 101;
            text-align: center;
            padding: 30px 0 25px 0;
        }

        .follow-code-container .follow-close {
            background: url(img/close1.png) no-repeat center center;
            background-size: 100% 100%;
            position: absolute;
            right: 12px;
            top: 12px;
            height: 18px;
            width: 18px;
        }
    </style>
</head>

<body style="background-color: #fff">
<script type="text/javascript">
    !function (e, t) {
        var n = e.documentElement,
            i = "orientationchange" in window ? "orientationchange" : "resize",
            d = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream, function () {
                var t = n.clientWidth;
                t && (t >= 750 ? (t = 750, e.body.style.width = "750px") : e.body.style.width = t + "px", n.style.fontSize = 100 * (t / 750) + "px", n.dataset.width = t, n.dataset.percent = 100 * (t / 750))
            });
        d(), e.documentElement.classList.add("iosx" + t.devicePixelRatio), e.addEventListener && t.addEventListener(i, d, !1)
    }(document, window)
</script>
<div class="follow-code-top">
    <img src="img/logo.png" class="share-user-img follow-code-logo" alt=""/>
    <span style="margin-left:10px;line-height: 40px; color: white;" class="no-share-text">解读全球经典好书</span>
    <div class="follow-code-btn hide" style="text-align: right;">
        关注公众号
    </div>
    <div class="open-code-btn hide" style="text-align: right;">
        打开公众号
    </div>
</div>
<div class="follow-code-container" style="display: none;">
    <div class="follow-mask"></div>
    <div class="follow-dialog">
        <div class="follow-close">
        </div>
        <div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">
            蜜读
        </div>
        <div>
            关注公众号，查看更多好书
        </div>
        <img src="img/wechatCode.png" alt="" style="width: 100px;display: inline-block;margin: 25px 0 15px 0;"/>
        <div style="color:#999">
            长按识别二维码关注
        </div>
    </div>

</div>
<div class="member-share-container hide" style="position: relative;">
    <div style="position: absolute;top:15px;left:50%;-webkit-transform:translateX(-50%);text-align: center;"
         class="share-user-info">
        <img src="img/logo.png" class="share-user-img" style="display:inline-block;width:5rem;height:5rem;" alt=""/>
        <p style="font-size: 13px;margin:5px 0 0 0;line-height:20px;color:#fff" class="share-user-name"></p>
    </div>
    <img src="img/memberShareBg.png" style="width: 100%;" alt=""/>
</div>
<div id="content"></div>
<!--回到首页-->
<img class="backToHome hide" src="img/backToHome.png"
     style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
</body>

<style type="text/css">
    .toFlip {
        display: none;
    }

    .txt img {
        width: 100%;
    }
</style>
<script id="chapter_tem" type="text/html">
    <div class="bookChapter">
        <div class="direct">
            <div class="fixed_wpr">
                <div class="wpr flex">
                    <span><img src="icon/directory.png" style="width:.28rem;" alt=""/>目录</span>
                    <em>{{chapterIndex+1}}/{{chaptercount}}</em>
                </div>
            </div>
            <div class="lists" id="listScroll">
                <div class="list_wpr box bg-f" style="min-height: 100%;">
                    <ul>
                        {{each data}}
                        <!--<li class="slideMenu"><a href="javascript:void(0)"><span style="width: 80%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chapternumberstr}} {{$value.chaptername}}</span><em>已阅读</em></a></li>-->
                        {{if $value.readable==0&&userVip.type!=1&&isorder!=1}}
                        <li data-readable="false" class="slideMenu">
                            <a href="javascript:void(0)"><span
                                    style="width: 80%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #999999;">{{$value.chaptername}}</span><img
                                    src="icon/lock.png" style="width: 0.4rem;"/></a>
                        </li>
                        {{else if userVip.type!=1}}
                        <li data-readable="true" class="slideMenu">
                            <a href="javascript:void(0)"><span
                                    style="width: 80%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chaptername}}</span></a>
                        </li>
                        {{else if userVip.type==1}}
                        <li data-readable="true" class="slideMenu">
                            <a href="javascript:void(0)"><span
                                    style="width: 80%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chaptername}}</span></a>
                        </li>
                        {{/if}} {{/each}}
                    </ul>
                </div>
            </div>
        </div>
        {{each data}} {{if $index==chapterIndex}}
        <div class="det">
            <h4>{{$value.chaptername}}</h4>
            <div class="aud_m">
                <div class="wpr">
                    <b style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{$value.chaptername}}</b>
                    <div class="author">主播：{{$value.videoauthor}}</div>
                    <div class="player table">
                        <div class="left">
                            <span id="play" class="toPlay"></span>
                        </div>
                        <div class="right clearfix">
                            <div class="line" id="box"><em id="strip"></em><var id="circel"></var></div>
                            <span class="f-l">00:00</span><span class="f-r">00:00</span>
                        </div>
                    </div>
                    <audio preload="none" id="audio" style="display:none;">
                        <source src="{{$value.chaptervideo | addUrl}}">
                    </audio>
                </div>
            </div>
            <div class="txt">
                {{@$value.content}}
            </div>
        </div>
        {{/if}} {{temp}} {{/each}}

    </div>

    <!-- 翻页 -->
    <div class="toFlip" style="display: {{if isorder==1}}block{{else if isorder==0}}none{{/if}};">
        <div id="nextChap" class="wpr flex">
            {{if chapterIndex!==0}}
            <a id="prev" style="padding: .2rem;" onclick="changeIndex(-1)" href="javascript:void(0)">上一节</a>
            {{else if chapterIndex==0}}
            <a id="prev" style="padding: .2rem;" href="javascript:void(0)"></a>
            {{/if}} {{if chapterIndex!==chaptercount-1}}
            <a id="next" style="padding: .2rem;" onclick="changeIndex(1)" href="javascript:void(0)">下一节</a>
            {{/if}}
        </div>
    </div>
</script>

<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script>
    document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script src="js/purl.js"></script>
<script type="text/javascript">
    var bookId = GetQueryString('bookid');
    var themeid = GetQueryString('themeid');
    var chapterIndex = GetQueryString('chapterIndex');
    var audioIndex;
    var currentTime;
    var duration;
    if (window.localStorage) {
        audioIndex = localStorage.getItem(bookId);
        if (audioIndex) {
            var value = localStorage.getItem(bookId + "_" + audioIndex);
            if (value) {
                var timeArr = value.split("_");
                if (timeArr.length == 2) {
                    currentTime = parseInt(timeArr[0]);
                    duration = parseInt(timeArr[1]);
                    if (currentTime >= duration) {
                        currentTime = 0;
                    }
                }
            }
        }
    }

    if (audioIndex && !chapterIndex) {
        chapterIndex = audioIndex;
    }
    if (!chapterIndex) {
        chapterIndex = 0;
    }
    chapterIndex = parseInt(chapterIndex);
    var bookname = GetQueryString('bookname');
    var bookimg = GetQueryString('bookimg');
    var book;
    var totalChapterCount;
    var videoauthorid = GetQueryString('videoauthorid');
    var copywriter = GetQueryString('copywriter');
    var isorder = GetQueryString('themeisorder');
    var openId2 = GetQueryString("openId2");
    //设置导入模板变变量
    template.defaults.imports.chapterIndex = chapterIndex;

    var imgHosturl = "http://img.readerday.com/cover/";
    template.defaults.imports.addUrl = function (value) {
        return imgHosturl + value
    };
    template.defaults.imports.totalReadCount = function (value) {
        value = value.toString();
        if (value.length <= 4) {
            return value;
        } else {
            value = value / 10000;
            return value = value.toFixed(1) + "万"
        }
    };

    $('.backToHome').click(function () {
        location.href = "index.html?merchantId="+merchantId
    })
    if(GetQueryString('home')){
        $('.backToHome').removeClass('hide')
    }
    function ascli(url) {
        var param = url.split("?")[1].split("&");
        param.sort();
        str = param.join("&") + "&key=wwdxreaderwhat0823";
        return url + "&sign=" + hex_md5(str).toUpperCase();
    }

    function render(data) {
        var html = template("chapter_tem", data);
        document.getElementById('content').innerHTML = html;
        $('body').animate({
            scrollTop: 0
        }, 300)

    };

    function afterAjax() {
        // 目录slide
        $('.direct .wpr').on('click', function () {
            if (totalChapterCount < 12) {
                //禁止滑动
                document.body.style.overflow = 'hidden';
                window.addEventListener('touchmove', _preventDefault);
            }
            $('.direct .lists').fadeIn(100, function () {
                $('.direct .list_wpr').addClass('animate');
            });
        })

        $('.direct .lists').click(function () {
            //恢复滑动效果
            document.body.style.overflow = 'auto';
            window.removeEventListener('touchmove', _preventDefault);
            $(this).fadeOut(100, function () {
                $('.direct .list_wpr').removeClass('animate');
            });
        })

        function _preventDefault(e) {
            e.preventDefault();
        }

//			var model = document.getElementById('listScroll'); // 弹窗dom对象
//			model.addEventListener('touchmove', function(e) {
//				e.stopPropagation();
//			}, false);
        // 音乐
        $(function () {
            var oAudio = document.querySelector('#audio');
            var oDiv1 = document.querySelector('#box');
            var oDiv2 = document.querySelector('#strip');
            var oDiv3 = document.querySelector('#circel');
            var oPlay = document.querySelector('#play');
            var timer = '';
            oAudio.addEventListener("loadedmetadata", function () {
                $('.player .right .f-r').text(formatSeconds(oAudio.duration));
                $('.player .right .f-l').text("00:00");
                var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId}))
                $.ajax({
                    type: "post",
                    url: hostUrl + "user/duration/add/"+ token +"/"+ sign +"/"+ date +"/"+ bookId,
                    data:{
                        token:token,
                        timestamp:date,
                        bookid:bookId,
                        sign:sign
                    },
                    async: true
                });

                if (isorder != 1) {
                    var id = bookId;
                    if (themeid) {
                        id = themeid;
                    }
                    var sign1 = hex_md5(objKeySort({token:token,timestamp:date,productId:bookId}))

                    $.ajax({
                        type: "post",
                        url: hostUrl + "user/bookshelf/add/"+ token +"/"+ sign1 +"/"+ date +"/" + bookId ,
                        data:{
                            token:token,
                            timestamp:date,
                            productId:bookId,
                            sign:sign1
                        },
                        async: true,
                        success: function(data) {

                        }
                    });
                }
            })
            oAudio.addEventListener("ended", function () {
                if (chapterIndex < totalChapterCount - 1) {
                    changeIndex(1);
                }
            })
            wx.ready(function () {
                //			oAudio.autoplay = "autoplay";
                oAudio.load();
                //			oAudio.play();
                //        	oAudio.addEventListener("canplay",function(){
                //        			oAudio.play();
                //        	})
            });

            function currentAndTotal(x) {
                var arr = x.split('*');
                return arr;
            }

            oPlay.onclick = function () {
                if (oAudio.paused) {
                    oAudio.play();
                    $(oPlay).removeClass('toPlay').addClass('toPause')
                    timer = setInterval(function () {
                        if (oAudio.paused) {
                            clearInterval(timer)
                            $(oPlay).removeClass('toPause').addClass('toPlay');
                            clearInterval(timer)
                        }

                        if (parseInt(oAudio.currentTime) % 60 == 0) {
                            var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId}))
                            $.ajax({
                                type: "post",
                                url: hostUrl + "user/duration/add/"+ token +"/"+ sign +"/"+ date +"/"+ bookId,
                                data:{
                                    token:token,
                                    timestamp:date,
                                    bookid:bookId,
                                    sign:sign
                                },
                                async: true
                            });
                        }

                        playAudio(oAudio.currentTime / oAudio.duration)
                        // vm.voteTime = oAudio.duration-oAudio.currentTime;
                        if (window.localStorage) {
                            localStorage.setItem(bookId, chapterIndex);
                            var key = bookId + "_" + chapterIndex;
                            var value = parseInt(oAudio.currentTime) + "_" + parseInt(oAudio.duration);
                            localStorage.setItem(key, value);
                        }
                        $('.player .right .f-l').text(formatSeconds(oAudio.currentTime))
                    }, 1000)
                } else {
                    oAudio.pause();
                    $(oPlay).removeClass('toPause').addClass('toPlay');
                    clearInterval(timer)
                }
            }

            setTimeout(function () {
                if (chapterIndex == audioIndex) {
                    oAudio.currentTime = currentTime;
                }
                oPlay.click();
            }, 1500)

            setTimeout(function () {
                if (oAudio.paused) {
                    if (chapterIndex == audioIndex) {
                        oAudio.currentTime = currentTime;
                    }
                    oPlay.click();
                }
            }, 2500)

            function playAudio(iNow) {
                oDiv2.style.width = iNow * 100 + '%';
                oDiv3.style.left = iNow * 100 + '%';
            }

            oDiv3.addEventListener('touchstart', function (ev) {
                clearInterval(timer)
                var oDiv1W = oDiv1.offsetWidth;
                var oldX = ev.targetTouches[0].clientX - oDiv3.offsetLeft;

                document.addEventListener('touchmove', fnMove, false)
                document.addEventListener('touchend', fnEnd, false)

                function fnMove(ev) {

                    var x = ev.targetTouches[0].clientX - oldX;
                    if (x >= oDiv1W) {
                        x = oDiv1W;
                    } else if (x <= 0) {
                        x = 0;
                    }
                    oDiv3.style.left = x + 'px';
                    oDiv2.style.width = x + 'px';

                }

                function fnEnd(ev) {
                    document.removeEventListener('touchend', fnEnd, false)
                    document.removeEventListener('touchmove', fnMove, false)
                    var newX = ev.changedTouches[0].clientX;
                    var oDiv2W = oDiv2.offsetWidth;
                    var oDuration = oDiv2W / oDiv1W;
                    clearInterval(timer)

                    oAudio.currentTime = oDuration * oAudio.duration;
                    timer = setInterval(function () {
                        if (oAudio.paused) {
                            clearInterval(timer)
                            $(oPlay).removeClass('toPause').addClass('toPlay');
                            clearInterval(timer)
                        }
                        if (window.localStorage) {
                            localStorage.setItem(bookId, chapterIndex);
                            var key = bookId + "_" + chapterIndex;
                            var value = parseInt(oAudio.currentTime) + "_" + parseInt(oAudio.duration);
                            localStorage.setItem(key, value);
                        }
                        if (parseInt(oAudio.currentTime) % 60 == 0) {
                            var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId}))
                            $.ajax({
                                type: "post",
                                url: hostUrl + "user/duration/add/"+ token +"/"+ sign +"/"+ date +"/"+ bookId,
                                data:{
                                    token:token,
                                    timestamp:date,
                                    bookid:bookId,
                                    sign:sign
                                },
                                async: true
                            });
                        }
                        playAudio(oAudio.currentTime / oAudio.duration)
                        $('.player .right .f-l').text(formatSeconds(oAudio.currentTime))
                    }, 1000)

                }
            }, false);

            $(".slideMenu").click(function () {
                if ($(this).attr('data-readable') == "true") {
                    template.defaults.imports.chapterIndex = $(this).index();
                    chapterIndex = $(this).index();
                    book.userVip = userVip
                    render(book);
                    afterAjax();
                } else {
                    dialog.alert({
                        title: "",
                        msg: '相关章节，开通会员后才能查看!',
                        buttons: ['取消', '开通']
                    }, function (ret) {
                        if (ret.buttonIndex == 2) {
                            var url = "memberPage.html?shareBack=1";
                            location.href = url;
                        }
                    });
                }
            })
        })

        //  滑动效果
        //

        $(window).scroll(function () {
            var txt = $('.bookChapter .det .txt'),
                fixed_wpr = $('.bookChapter .direct .fixed_wpr')
            if ($('body').scrollTop() >= txt.offset().top - 80) {
                fixed_wpr.addClass('show');
            } else {
                fixed_wpr.removeClass('show');
            }

            if ($('body').scrollTop() + $(window).height() >= $('body').height() - 80) {
                $('.toFlip').fadeIn()
            } else {
                $('.toFlip').fadeOut()
            }

        })
    }

    //分享按钮和解除
    var bindAndUnbindClick = function () {
        setTimeout(function () {
            $('.open-code-btn').on('click', function () {
                location.href = "auth.html";
            })
            $('.follow-code-btn').on('click', function () {
                $('.follow-code-container').show()
            })
            $('.follow-code-container .follow-close').on('click', function () {
                $('.follow-code-container').hide()
            })
            $('.follow-code-container .follow-mask').on('click', function () {
                $('.follow-code-container').hide()
            })
        }, 500)
    }
    $(function () {
        function after() {
            var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId,merchantId:merchantId}))
            var reqUrl = hostUrl + "product/bookchapter/list/"+ token +"/"+ sign +"/"+ date +"/" +bookId + "/" + merchantId
            $.ajax({
                type: "get",
                url: reqUrl,
                async: true,
                success: function (data) {

                    data.userVip = userVip;
                    $("title").text(bookname);
                    if (isorder == 1) {
                        data.isorder = 1;
                    } else {
                        data.isorder = data.data[0].isorder;
                    }

                    book = data;
                    var userInfo = JSON.parse(sessionStorage.getItem('weixinData')).data;
                    relink = shareUrl +"auth.html?url=" + encodeURIComponent(shareUrl+ "bookDetail.html?bookid=" + bookId );
                    shareWx(bookname, bookimg, bookname);
                    totalChapterCount = data.data.length;
                    if (window.localStorage) {
                        localStorage.setItem(bookId + "_count", totalChapterCount);
                    }
                    data.chaptercount = totalChapterCount;
                    render(data);
                    afterAjax();
                    bindAndUnbindClick()
                }
            });

        }

        getToken(after);
    })

    $("#content").on('click', '#buy', function () {
        var url = "memberPage.html?shareBack=1";
        location.href = url;
    });

    function changeIndex(x) {
        chapterIndex += x;

        if (chapterIndex < 0) {
            chapterIndex = 0;
        }
        if (chapterIndex > totalChapterCount - 1) {
            chapterIndex = totalChapterCount - 1
        }
        template.defaults.imports.chapterIndex = chapterIndex;
        book.userVip = userVip
        render(book);
        afterAjax();
    }

    function formatSeconds(a) {
        var hh = parseInt(a / 3600);
        if (hh > 0 && hh < 10) {
            hh = "0" + hh;
        } else {
            hh = '';
        }
        var mm = parseInt((a - hh * 3600) / 60);
        if (mm < 10) mm = "0" + mm;
        var ss = parseInt((a - hh * 3600) % 60);
        if (ss < 10) ss = "0" + ss;
        var length = hh.length ? (hh + ":" + mm + ":" + ss) : mm + ":" + ss;
        if (a > 0) {
            return length;
        } else {
            return "00:00";
        }
    }

    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            location.reload()
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });

</script>

</html>